<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="js/CRCMenu.v2.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #f0f4f8;
      font-family: 'Segoe UI', system-ui, sans-serif;
    }

    .compass {
      position: relative;
      width: 360px;
      height: 360px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
      border: 1px solid #e2e8f0;
    }

    .markers {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .marker {
      position: absolute;
      width: 100%;
      height: 100%;
      transform-origin: center;
    }

    .marker::after {
      content: '';
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 8px;
      background: #94a3b8;
    }

    .marker.hour::after {
      width: 3px;
      height: 14px;
      background: #334155;
    }

    .hand {
      position: absolute;
      bottom: 50%;
      left: 50%;
      transform-origin: bottom center;
      border-radius: 10px;
      will-change: transform;
    }

    .hour-hand {
      width: 6px;
      height: 90px;
      background: #334155;
      margin-left: -3px;
    }

    .minute-hand {
      width: 4px;
      height: 120px;
      background: #475569;
      margin-left: -2px;
    }

    .second-hand {
      width: 2px;
      height: 140px;
      background: #ef4444;
      margin-left: -1px;
    }

    .center {
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #334155;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
    }

    .text-container {
      position: absolute;
      top: 65%;
      left: 50%;
      transform: translateX(-50%);
      padding: 8px 16px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      background: white;
      z-index: 20;
    }

    .time-display {
      color: #334155;
      text-align: center;
    }

    .digital {
      font-size: 22px;
      font-weight: 500;
      margin-bottom: 4px;
    }

    .date {
      font-size: 14px;
      color: #64748b;
    }
  </style>
</head>
<body>
  <div class="compass">
    <div class="markers" id="markers"></div>
    <div class="hand hour-hand"></div>
    <div class="hand minute-hand"></div>
    <div class="hand second-hand"></div>
    <div class="center"></div>
    <div class="text-container">
      <div class="time-display">
        <div class="digital" id="digital-time"></div>
        <div class="date" id="date"></div>
      </div>
    </div>
  </div>

  <script>
    function createMarkers() {
      const markers = document.getElementById('markers');
      for (let i = 0; i < 60; i++) {
        const marker = document.createElement('div');
        marker.className = `marker ${i % 5 === 0 ? 'hour' : ''}`;
        marker.style.transform = `rotate(${i * 6}deg)`;
        markers.appendChild(marker);
      }
    }

    const startTime = new Date().getTime();
    const initDate = new Date(startTime);
    const initialSeconds = initDate.getSeconds() + initDate.getMilliseconds() / 1000;
    const initialMinutes = initDate.getMinutes() + initialSeconds / 60;
    const initialHours = (initDate.getHours() % 12) + initialMinutes / 60;

    let totalHourAngle = initialHours * 30;
    let totalMinuteAngle = initialMinutes * 6;
    let totalSecondAngle = initialSeconds * 6;

    let currentHourAngle = totalHourAngle;
    let currentMinuteAngle = totalMinuteAngle;
    let currentSecondAngle = totalSecondAngle;

    const easeOut = (t) => {
      const s = 1.70158;
      return t === 1 ? 1 : 1 - Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * ((2 * Math.PI) / 3));
    };

    function updateHands() {
      const elapsedSeconds = (new Date().getTime() - startTime) / 1000;

      totalSecondAngle = initialSeconds * 6 + elapsedSeconds * 6;
      totalMinuteAngle = initialMinutes * 6 + elapsedSeconds * 0.1;
      totalHourAngle = initialHours * 30 + elapsedSeconds * (30 / 3600);

      const progress = 0.3;
      currentSecondAngle += (totalSecondAngle - currentSecondAngle) * easeOut(progress);
      currentMinuteAngle += (totalMinuteAngle - currentMinuteAngle) * easeOut(progress);
      currentHourAngle += (totalHourAngle - currentHourAngle) * easeOut(progress);

      document.querySelector('.second-hand').style.transform = `rotate(${currentSecondAngle % 360}deg)`;
      document.querySelector('.minute-hand').style.transform = `rotate(${currentMinuteAngle % 360}deg)`;
      document.querySelector('.hour-hand').style.transform = `rotate(${currentHourAngle % 360}deg)`;

      const now = new Date();
      document.getElementById('digital-time').textContent = 
        now.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
      document.getElementById('date').textContent = 
        now.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric', weekday: 'short' });

      requestAnimationFrame(updateHands);
    }

    createMarkers();
    requestAnimationFrame(updateHands);
  </script>
</body>
</html>